<template>
  <div>
    <!-- 1.0 首页头部 -->
    <div class="header">
      <!-- 1.1 左边 logo 图标 -->
      <span class="iconfont iconnew"></span>
      <!-- 1.2 中间搜索框 -->
      <div
        class="search"
        @click="$router.push('/search')"
      >
        <i class="iconfont iconsearch"></i>
        <span>搜索新闻</span>
      </div>
      <!-- 1.3 右侧 个人中心图标 -->
      <span
        @click="$router.push('/userinfo')"
        class="iconfont iconwode"
      ></span>
    </div>
    <!-- 2.0 tabs 分类切换 -->
    <van-tabs
      sticky
      v-model="activeIndex"
    >
      <van-tab
        v-for="item in cateList"
        :key="item.id"
        :title="item.name"
      >
        <!-- <h2>{{item.name}}选项卡的内容</h2>
        现在的内容是假的，需要发送请求后再变成真的
        <p>------------------------</p> -->
        <!-- 循环遍历 PostItem 组件，记得传递 postData 数据给子组件 -->
        <!-- 遍历的时候只需要遍历当前分类里面的 postList属性即可 -->
        <!-- 用 Vant 的 List 组件包裹 PostItem -->
        <!-- 

          :immediate-check="false"   如果忘记添加，上来会直接发送两个请求
        -->
        <van-list
          v-model="item.loading"
          :finished="item.finished"
          finished-text="😀我也是有底线的"
          @load="loadMorePost"
          :immediate-check="false"
        >
          <PostItem
            v-for="item2 in item.postList"
            :key="item2.id"
            :postData="item2"
          />
        </van-list>
      </van-tab>
    </van-tabs>
    <!-- 3.0 新闻列表 -->
  </div>
</template>

<script>
// 记得检查 自动导入 是否正确
import { getCategory, getPostList } from "@/api";
// 1. 新建组件
// 2. 导入自己封装的组件不需要解构的
import PostItem from "@/components/PostItem.vue";
import { getManage } from "@/utils/local";
export default {
  // 3. 注册组件
  components: {
    PostItem,
  },
  data() {
    return {
      activeIndex: 0,
      // 分类列表
      cateList: [],
      // 新闻列表
      postList: [],
    };
  },
  // 变量监听
  watch: {
    activeIndex(index) {
      // console.log("watch", index);
      // const id = this.cateList[index].id;
      if (index === this.cateList.length - 1) {
        return this.$router.push("/manage");
      }
      // 如果当前选项卡的 postList 数组长度为 0，才重新的发送请求
      if (this.cateList[index].postList.length === 0) {
        // console.log("当前索引对应的id", id);
        this.getPostListData();
      }
    },
  },
  // created / mounted 两个地方发送网络请求获取数据都可以
  created() {
    /* 首页展示的栏目也要分两种情况：1.如果有本地存储，直接使用，2. 没本地存储，发送请求获取 */
    const { activeList } = getManage();
    if (activeList) {
      this.cateList = activeList.map((item) => {
        // return 返回处理后的对象
        return {
          // 先把原本的 item 返回来，注意这里需要 ... 展开对象
          ...item,
          // 额外给每一项都初始化一个空数组，防止其他地方调用数组 length 属性的时候报错
          postList: [],
          // 页码的初始化，到时候滚动触底的时候，再让某个分类的页码加 1
          pageIndex: 1,
          pageSize: 5,
          loading: false,
          finished: false,
        };
      });
      // 添加一个向下的箭头
      this.cateList.push({ name: "🔽" });
      // 调用组件上自己的方法，this 表示当前的 Vue 组件
      // 🧨 BUG1
      this.getPostListData();
      // 走了情况1：获取本地存储，代码就无需继续往后运行了
      return;
    }
    // 1.0 调用获取栏目列表封装的 API
    getCategory().then((res) => {
      // console.log(res);
      // 把返回的分类栏目绑定到 data 中，在 VueDevTools 看数据绑定是否成功
      // 🚩把返回的数据先 map 映射成数组，
      // cateList 数组的每项中都添加一个 postList 空数组[]，防止其他地方调用数组 lenght 的时候报错
      this.cateList = res.data.data.map((item) => {
        // return 返回处理后的对象
        return {
          // 先把原本的 item 返回来，注意这里需要 ... 展开对象
          ...item,
          // 额外给每一项都初始化一个空数组，防止其他地方调用数组 length 属性的时候报错
          postList: [],
          // 页码的初始化，到时候滚动触底的时候，再让某个分类的页码加 1
          pageIndex: 1,
          pageSize: 5,
          loading: false,
          finished: false,
        };
      });
      // 添加一个向下的箭头
      this.cateList.push({ name: "🔽" });
      // 调用组件上自己的方法，this 表示当前的 Vue 组件
      // 🧨 BUG1
      this.getPostListData();
    });
  },
  methods: {
    // 注册加载下一页的函数
    loadMorePost() {
      console.log("即将触底，需要页码加1，并加载下一页数据");
      // 当前分类的页码加1
      this.cateList[this.activeIndex].pageIndex += 1;
      // 加载下一页数据
      this.getPostListData();
    },
    // 由于以后切换选项卡的时候需要获取新的栏目列表数据，所以封装起来方便后期使用
    getPostListData() {
      // 🤞 id 获取的优化
      const { id, pageIndex, pageSize } = this.cateList[this.activeIndex];
      // 等价于以下两行代码
      // const id = this.cateList[this.activeIndex].id;
      // const pageIndex = this.cateList[this.activeIndex].pageIndex;
      // 调用封装的API，记得检查自动导入是否正确
      getPostList({
        category: id, // 分类 id
        pageSize: pageSize, // 页容量
        pageIndex: pageIndex, // 页码
      }).then((res) => {
        // console.log(res); // 验证
        // this.postList = res.data.data;
        // 把返回的新闻列表变成了分类对象的子属性
        // 🧨  BUG2 把分页加载回来的数据，覆盖掉了源数据
        // this.cateList[this.activeIndex].postList = res.data.data;
        // ✅ 把新获取到的分页数据追加到原本的数组中，注意这里需要用 ... 展开数组后再追加
        this.cateList[this.activeIndex].postList.push(...res.data.data);
        // 加载完成就把 loading 状态取消掉
        this.cateList[this.activeIndex].loading = false;
        // 🚩检测是否已经结束，是否还需要加载下一页，检测条件：当前的数组长度是否已经等于总条数
        if (
          this.cateList[this.activeIndex].postList.length === res.data.total
        ) {
          // 修改成结束状态即可
          this.cateList[this.activeIndex].finished = true;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
// 箭头是倒数的第二个孩子
/deep/ .van-tab:nth-last-child(2) {
  background-color: #fff;
  position: sticky;
  right: -8px;
  // 把组件默认的 flex 值覆盖掉
  flex: 0 0 44px;
}
.header {
  display: flex;
  align-items: center;
  height: 50px;
  background-color: red;
  color: #fff;
  padding: 0 15px;
  .iconnew {
    font-size: 45px;
  }

  .search {
    flex: 1;
    height: 34px;
    background-color: rgba(255, 255, 255, 0.5);
    // 只需要大于等于盒子高度的一般，就是这个胶囊型圆角盒子
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 20px;
    .iconsearch {
      margin-right: 3px;
    }

    span {
      font-size: 12px;
    }
  }

  .iconwode {
    font-size: 25px;
  }
}
</style>